<template>
  <div class="stock-list">
    <SearchForm
      v-model="formOption.data"
      :form-option="formOption"
      :show-btn="true"
      :btn-list="btnList"
    />

    <PageTable
      :options="options"
      :columns="columns"
      :data="dataSource"
      @selectChange="selectChange"
    />

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getDetailList"
    />
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
import { COUPON_STATUS } from '@/enum/coupon'
export default {
  name: 'NoExchangeList',
  data() {
    return {
      formOption: {
        data: {},
        items: [
          {
            type: 'input',
            label: '查验码',
            value: 'couponCode',
            labelWidth: '70px'
          },
          {
            type: 'input',
            label: '中奖概率',
            value: 'acquireRatio',
            labelWidth: '90px'
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getDetailList()
          }
        },
        {
          label: '导出当前页',
          onClick: () => {
            this.exportFile()
          }
        },
        {
          label: '导出全部',
          onClick: () => {
            this.exportFile('all')
          }
        },
        {
          label: '作废',
          onClick: () => {
            this.invalidBatch()
          }
        }
      ],
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      columns: [
        {
          prop: 'couponCode',
          label: '兑换码',
          render: (h, { row }) => {
            return <div style={'color: #409eff'}>{row.couponCode}</div>
          }
        },
        {
          prop: 'acquireRatio',
          label: '中奖概率'
        },
        {
          prop: 'count',
          label: '数量',
          render: () => {
            return <div>x1</div>
          }
        },
        {
          prop: 'storeName',
          label: '销售渠道',
          render: (h, { row }) => {
            return <span>{row.storeName || '暂无'}</span>
          }
        },
        {
          prop: 'isLibrary',
          label: '出库状态',
          render: (h, { row }) => {
            return <span>{row.isLibrary ? '已出库' : '未出库'}</span>
          }
        },
        {
          prop: 'status',
          label: '兑换状态',
          render: (h, { row }) => {
            return <span>{COUPON_STATUS[row.status]}</span>
          }
        },
        {
          prop: 'createdTime',
          label: '生成时间'
        }
      ],
      options: {
        border: true,
        select: true
      },
      ids: [],
      dataSource: [],
      selectList: []
    }
  },
  computed: {
    id() {
      return this.$route.query?.id
    }
  },
  watch: {
    selectList(list) {
      this.ids = list?.map(item => item.id)
    }
  },
  created() {
    this.getDetailList()
  },
  methods: {
    // 获取详情列表
    async getDetailList() {
      const params = {
        // 0: 未出库, 1: 未兑换, 2: 已兑换, 3: 作废
        couponId: this.id,
        status: 1,
        ...this.listQuery
      }
      const { couponCode, acquireRatio } = this.formOption.data
      if (couponCode) params.couponCode = couponCode
      if (acquireRatio) params.acquireRatio = acquireRatio
      const {
        data: { records, total }
      } = await this.$http.coupon.voucherApi.getDetailList({ params })
      this.dataSource = records
      this.total = total
    },
    // 作废
    async invalidBatch() {
      if (!this.ids.length) return this.$message.error('请选择要作废的数据！')
      const { status, msg } = await this.$http.coupon.voucherApi.invalidBatch(this.ids)
      if (status === 200) {
        this.getDetailList()
        this.$emit('update')
        this.$message.success('作废成功！')
      } else {
        this.$message.error(msg)
      }
    },
    // 导出
    async exportFile(key) {
      // 存在key则是导出全部
      if (!key) {
        if (!this.ids.length) return this.$message.error('请选择要导出的数据！')
      }
      const headerData = this.columns.map(item => item.label)
      const filterData = this.columns.map(item => item.prop)

      const list = key
        ? this.$lodash.cloneDeep(await this.exportAllFile())
        : this.$lodash.cloneDeep(this.selectList)

      const tableData = list.map(item => {
        item.count = 'x1'
        item.isLibrary = item.isLibrary ? '已出库' : '未出库'
        item.status = `${COUPON_STATUS[item.status]}`
        return item
      })
      export2Excel(headerData, tableData, filterData, '未兑换', () => {
        this.$message.success('导出成功！')
      })
    },
    // 导出全部
    async exportAllFile() {
      const params = {
        // 0: 未出库, 1: 未兑换, 2: 已兑换, 3: 作废
        couponId: this.id,
        status: 1,
        pageNo: 1,
        pageSize: this.total
      }
      const { couponCode, acquireRatio } = this.formOption.data
      if (couponCode) params.couponCode = couponCode
      if (acquireRatio) params.acquireRatio = acquireRatio
      const {
        data: { records }
      } = await this.$http.coupon.voucherApi.getDetailList({ params })
      return records
    },
    // 监听选择行数据
    selectChange(list) {
      this.selectList = list
    }
  }
}
</script>

<style lang="scss" scoped></style>
